@use '/@/theme/mixins/config' as *;
@use '/@/theme/mixins/function' as *;

#qiankun-html {
  /* 主布局样式
------------------------------- */
  .layout-container {
    .layout-pd {
      padding: 15px !important;
    }
    .layout-flex {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    // 用于界面高度自适应
    .layout-full-height {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      overflow: hidden;
      @extend .layout-flex;
      &-auto {
        height: inherit;
        @extend .layout-flex;
      }
      &-view {
        background: getCssVar('color-white');
        width: 100%;
        height: 100%;
        border-radius: #{getCssVar(border-radius-large)};
        border: 1px solid getCssVarWithDefault('border-color-light', #ebeef5);
        overflow: hidden;
      }
    }
    // 用于设置 iframe loading 时的高度（loading 垂直居中显示）
    .layout-iframe {
      width: 100%;
      &__content {
        position: relative;
      }
      .#{$elNamespace}-loading-parent--relative {
        height: 100%;
      }
    }
    .#{$elNamespace}-scrollbar {
      width: 100%;
    }

    // pc端左侧导航样式
    .layout-aside-pc-220 {
      width: 220px !important;
      transition: width 0.3s ease;
    }
    .layout-aside-pc-72 {
      width: 72px !important;
      transition: width 0.3s ease;
    }
    .layout-aside-pc-1 {
      width: 1px !important;
      transition: width 0.3s ease;
    }
    // 手机端左侧导航样式
    .layout-aside-mobile {
      position: fixed;
      top: 0;
      left: -220px;
      width: 220px;
      z-index: 9999999;
    }
  }

  /* nprogress 进度条跟随主题颜色
------------------------------- */
  #nprogress {
    .bar {
      background: getCssVar('color-primary') !important;
      z-index: 9999999 !important;
    }
  }

  /* flex 弹性布局
------------------------------- */
  .flex {
    display: flex;
  }
  .flex-auto {
    flex: 1;
    overflow: hidden;
  }
  .flex-center {
    @extend .flex;
    flex-direction: column !important;
    width: 100%;
    overflow: hidden;
  }
  .flex-margin {
    margin: auto;
  }
  .flex-warp {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0 -5px;
    .flex-warp-item {
      padding: 5px;
      .flex-warp-item-box {
        width: 100%;
        height: 100%;
      }
    }
  }

  /* cursor 鼠标形状
------------------------------- */
  // 默认
  .cursor-default {
    cursor: default !important;
  }
  // 帮助
  .cursor-help {
    cursor: help !important;
  }
  // 手指
  .cursor-pointer {
    cursor: pointer !important;
  }
  // 移动
  .cursor-move {
    cursor: move !important;
  }

  /* 宽高 100%
------------------------------- */
  .w100 {
    width: 100% !important;
  }
  .h100 {
    height: 100% !important;
  }
  .vh100 {
    height: 100vh !important;
  }
  .max100vh {
    max-height: 100vh !important;
  }
  .min100vh {
    min-height: 100vh !important;
  }

  /* 颜色值
------------------------------- */
  .color-primary {
    color: getCssVar('color-primary');
  }
  .color-success {
    color: getCssVar('color-success');
  }
  .color-warning {
    color: getCssVar('color-warning');
  }
  .color-danger {
    color: getCssVar('color-danger');
  }
  .color-info {
    color: getCssVar('color-info');
  }

  /* 字体大小全局样式
------------------------------- */
  @for $i from 10 through 32 {
    .font#{$i} {
      font-size: #{$i}px !important;
    }
  }

  /* 外边距、内边距全局样式
------------------------------- */
  @for $i from 1 through 35 {
    .mt#{$i} {
      margin-top: #{$i}px !important;
    }
    .mr#{$i} {
      margin-right: #{$i}px !important;
    }
    .mb#{$i} {
      margin-bottom: #{$i}px !important;
    }
    .ml#{$i} {
      margin-left: #{$i}px !important;
    }
    .pt#{$i} {
      padding-top: #{$i}px !important;
    }
    .pr#{$i} {
      padding-right: #{$i}px !important;
    }
    .pb#{$i} {
      padding-bottom: #{$i}px !important;
    }
    .pl#{$i} {
      padding-left: #{$i}px !important;
    }
  }
}
